﻿@section Styles{
    <style>
        body {
            background-color: #f0f2f5 !important;
        }
    </style>
}

@section Scripts{
    <input type="hidden" value='@Html.Raw(ViewData["power"])' id="hidden_power" />
    <input type="hidden" value='@ViewData["isFindBack"]' id="hidden_isFindBack" />
    <script src="~/services/Framework/SysFunction/indexService.js"></script>
}
<div id="app" v-cloak class="p-15">
    <el-collapse-transition>
        <el-card class="w100 mb-15" shadow="never" :body-style="{padding:0}" v-show="table.search.state">
            <el-row :gutter="15" class="p-15">
                <el-col :xs="24" :sm="12" :md="6" :lg="4" :xl="4" class="pb-15">
                    <el-input v-model="table.search.vm.name" placeholder="功能名称" />
                </el-col>
                <el-col :xs="24" :sm="12" :md="6" :lg="4" :xl="4" class="pb-15">
                    <el-input v-model="table.search.vm.byName" placeholder="功能别名" />
                </el-col>
                <!--button-->
                <el-col :xs="24" :sm="12" :md="6" :lg="4" :xl="4" style="float: right">
                    <el-button type="primary" @@click="searchEvent">查询</el-button>
                    <el-button @@click="onResetSearch">重置</el-button>
                    <el-button type="text" @@click="table.search.state = !table.search.state" v-if="table.search.fieldCount > 5">
                        <div v-show="!table.search.state">
                            <i class="el-icon-arrow-down"></i>&nbsp;&nbsp;展开
                        </div>
                        <div v-show="table.search.state">
                            <i class="el-icon-arrow-up"></i>&nbsp;&nbsp;收起
                        </div>
                    </el-button>
                </el-col>
            </el-row>
        </el-card>
    </el-collapse-transition>
    <el-card class="w100" shadow="never" :body-style="{padding:0}">
        <el-row :gutter="15" class="p-15 pb-0">
            <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" class="pb-15">
                <template v-if="power.search">
                    <el-button @@click="table.search.state=!table.search.state">
                        <i class="el-icon-arrow-up" v-if="table.search.state"></i>
                        <i class="el-icon-arrow-down" v-else></i>
                        检索
                    </el-button>
                </template>
                <template v-if="power.insert">
                    <el-button type="primary" icon="el-icon-plus" @@click="info()">
                        新建
                    </el-button>
                </template>
                <template v-if="power.delete">
                    <el-button type="danger" icon="el-icon-delete" @@click="deleteList()">
                        批量删除
                    </el-button>
                </template>
            </el-col>
            <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" class="pb-15 text-right">
                <el-dropdown>
                    <el-button icon="el-icon-arrow-down">
                        更多操作
                    </el-button>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item>
                            <span @@click="exportExcel"> 导出 Excel</span>
                        </el-dropdown-item>
                        <el-dropdown-item>
                            <span @@click="exportExcel"> 导出 Pdf</span>
                        </el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </el-col>
        </el-row>
        <el-table :data="table.data" row-key="id" @@selection-change="(array)=>{table.selectedRowKeys=array;}" @@row-dblclick="row_dblclick" size="medium">
            <el-table-column type="index" width="50" fixed></el-table-column>
            <el-table-column type="selection" width="50" fixed></el-table-column>
            <!--根据查询接口自动加载头部信息 start-->
            <el-table-column v-for="(item,index) in table.columns"
                             :prop="item.fieldName"
                             :label="item.title"
                             :key="index"
                             :width="item.width"
                             v-if="item.show">
            </el-table-column>
            <!--根据查询接口自动加载头部信息 end-->
            <el-table-column fixed="right" label="操作" width="100" v-if="power.update || power.delete">
                <template slot-scope="scope">
                    <el-link type="primary" @@click="info(scope.row.id)" v-if="power.update">
                        编辑
                    </el-link>
                    <el-link type="danger" @@click="deleteList(scope.row.id)" v-if="power.delete">
                        删除
                    </el-link>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination @@size-change="(val)=>{table.rows=val;findList();}"
                       @@current-change="(val)=>{table.page=val;findList();}" :current-page="table.page"
                       :page-sizes="[10, 15, 20, 50, 100, 200, 300, 400, 1000]" :page-size="table.rows"
                       layout="total, sizes, prev, pager, next, jumper" :total="table.total" class="mt-15 ml-15 mb-15">
        </el-pagination>
    </el-card>
</div>